import React, { Component } from 'react'
import { getbuslist, getsplist, getBus } from '../../redux/actionCreator';
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

class Detaillist extends Component {
    constructor(props) {
        super(props);
        this.props.dispatch(getsplist());
        this.props.dispatch(getbuslist());
    }
    render() {

        return (
            <div style={{ minHeight: '100vh', display: 'flex' }}>
                <div style={{ backgroundColor: "#080904", minHeight: '100vh', display: 'flex', width: '100%' }}>
                    <div style={{ width: '90%', margin: '0 auto' }}>
                        <div style={{ height: '20px' }}></div>
                        <i className="iconfont icon-fanhui" style={{ fontSize: '1.7em' }} onClick={() => this.props.history.goBack()}></i>
                        <div style={{ fontSize: '1.5em', fontWeight: 'bold', margin: '0.6em', borderBottom: '1px solid #ccc', padding: '0.5em' }}>采摘列表</div>
                        <ul>
                            {this.props.shop.map((item, index) => {
                                if (String(item.commodity_id).slice(0, 1) == JSON.parse(localStorage.getItem('countyDetail')).county_id) {
                                    return <li key={index} className='hot-li' style={{ borderRadius: '20px', backgroundColor: '#D47666' }}
                                        onClick={() => {
                                            this.props.history.push({
                                                pathname: '/detail',
                                                // search: `commodity_id=${item.commodity_id}`
                                            })
                                            // 将商品信息保存在本地方便存取 
                                            localStorage.setItem('commoditydetail', JSON.stringify(item))
                                            // 将此商品所对应的商家信息存储在本地方便跳转之后输出信息
                                            this.props.business.map((item2) => {
                                                if (item2.business_id == item.business_id) {
                                                    localStorage.setItem('busdetail', JSON.stringify(item2))
                                                }
                                            })
                                        }}
                                    >

                                        <img className="hot-img" src={`http://www.h5weixin.club:1025/api/image/${item.commodity_pic}`}></img>

                                        <span className="hot-word">
                                            <div className="hot-word-title">{((getBus(this.props)).filter((item2) => item2.business_id === item.business_id))[0].business_name}·{item.commodity_title}</div>
                                            <div className="hot-word-msg">
                                                <div>
                                                    <i className="iconfont icon-yuyue"></i>
                                                    <span>{item.commodity_time}</span>
                                                </div>
                                                <div>
                                                    <i className="iconfont icon-didian"></i>
                                                    <span>{((getBus(this.props)).filter((item2) => item2.business_id === item.business_id))[0].business_address}·{item.commodity_title}</span>
                                                </div>
                                                <div>
                                                    <i className="iconfont icon-jinqian"></i>
                                                    <span>{item.commodity_money}</span>
                                                </div>
                                                <div>
                                                    <span>
                                                        <i className="iconfont icon-yuyue1"></i>
                                                        {item.commodity_appoint}
                                                    </span>
                                                    <span style={{ marginLeft: '10px' }}>
                                                        <i className="iconfont icon-xin1"></i>
                                                        {item.commodity_collect}
                                                    </span>
                                                </div>


                                            </div>
                                        </span>

                                    </li>
                                }
                              
                            })}
                        </ul>
                    </div>

                </div>

                <div style={{ flex: '1' }}></div>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    business: state.business,
    shop: state.shop
})

export default withRouter(connect(mapStateToProps)(Detaillist))